<template>
  <div class="PersonalCenter">
    <el-card>
      <div class="radio-box">
        <el-radio-group v-model="radioValue" size="medium ">
          <el-radio-button label="概览"></el-radio-button>
          <el-radio-button label="我的设备"></el-radio-button>
          <el-radio-button label="我的服务单"></el-radio-button>
        </el-radio-group>
      </div>
      <div class="container">
        <PersonalCenterPage v-if="radioValue==='概览'"></PersonalCenterPage>
        <MyDevice v-if="radioValue==='我的设备'"></MyDevice>
        <MyServicesList v-if="radioValue==='我的服务单'"></MyServicesList>
      </div>
    </el-card>
  </div>
</template>

<script>
  import MyDevice from './components/MyDevice.vue'
  import MyServicesList from './components/MyServicesList.vue'
  import PersonalCenterPage from './components/PersonalCenterPage.vue'
  export default {
    name:'PersonalCenter',
    data(){
      return {
        radioValue:'概览',
      }
    },
    methods: {},
    components: {
      MyDevice,
      MyServicesList,
      PersonalCenterPage
    },
    computed: {}
  }
</script>

<style lang="scss" scoped>
  .PersonalCenter{
    margin-bottom: 20px;
    .radio-box{
      text-align: center;
    }
    .container{
      margin-top: 20px;
    }
  }
</style>
